<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>充值中心</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script>
        (function () {
            var change = 'orientationchange' in window ?'orientationchange' :'resize';
            function calculate() {
                var deviceWidth = document.documentElement.clientWidth;
                if(deviceWidth<320){
                    deviceWidth = 320;
                }else if(deviceWidth>750){
                    deviceWidth = 750;
                }
                document.documentElement.style.fontSize = deviceWidth/7.5 + 'px';
            }
            window.addEventListener(change,calculate,false);
            calculate();
        })();
    </script>
    
    <script type="text/javascript" src="__ROOT__/public/js/jquery-3.1.1.js"></script>
    <style>
        body,h2,h3,h4,h5,p,ul{margin:0;font-weight: normal}
        ul{padding:0;list-style:none;}
        *{box-sizing:border-box;}
        .font0{font-size:0;}
        body{font:0.3rem 'Microsoft YaHei';color:#666;}
        a,u{text-decoration: none;color:#333;display: inline-block;}
        span{color:#d22f22}
        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {  color:#999;  font-size:0.3rem;  }
        input:-moz-placeholder, textarea:-moz-placeholder {  color:#999;  font-size:0.3rem;  }
        input::-moz-placeholder, textarea::-moz-placeholder {  color:#999;  font-size:0.3rem;  }
        input:-ms-input-placeholder, textarea:-ms-input-placeholder {  color:#999;  font-size:0.3rem;  }
        textarea,input{  outline: none;  resize: none; border:none; }
        .payHeader{background:#f3f3f3;padding:.28rem 0 .28rem .28rem;}
        .paySec,.payWay{padding:0 .43rem;}
        .secTop>p{padding:0.25rem 0;}
        .payList{text-align: center}
        .payList>li{display: inline-block;padding:0.16rem 0.08rem;width:30%;}
        .payList>li>a,.payList input{width:100%;border:1px solid #999;border-radius: 0.1rem;padding:0.2rem 0;vertical-align: middle}
        .payList>li.active>a,.payList>li.active>input{border-color:#d22f22;}
        .payList>li>a>p{font-size:0.33rem;color:#999;}
        .payList input{padding:0.23rem 0;text-align: center;font-size:0.3rem;}
        .howPay{padding:.18rem 0 .18rem .43rem;background:#f3f3f3}
        .payWay li{  border-bottom:1px solid #E8E8E8;  position: relative;padding:0.38rem 0 0.38rem 0.8rem;}
        .payWay .checkboxs{  display: inline-block;  width:0.4rem;  height:0.4rem;  overflow: hidden;  position:absolute;  border-radius: 50%;  top:50%;  right:0;  transform:translate(-50%,-50%);  -webkit-transform:translate(-50%,-50%);
        }
        .payWay .checkboxs input{  visibility: hidden;  }
        .payWay .checkboxs i{  width:100%;  height:100%;  position:absolute;  top:0;  left:0;  background:#e8e8e8;  border-radius: 50%;  border:1px solid #bebebe;  }
        .payWay .checkboxs i::after{  content:'';  position:absolute;  top: 45%;  left:50%;  width:55%;  height:30%;  border:2px solid #fff;  border-top:none;  border-right:none;  transform: translate(-50%,-50%) rotate(-45deg);  -webkit-transform:translate(-50%,-50%) rotate(-45deg);  transition:all linear 0.5s;  }
        .payWay .checkboxs input:checked +i{  background:#d22f22;  border:1px solid transparent;  }
        .payWay>li>a>u{width:0.6rem;height:0.52rem;background:url("/templates/static/images/cz.png")no-repeat;background-size:0.6rem 1.26rem;position:absolute;top:50%;left:0;transform:translate(0,-50%);-webkit-transform:translate(0,-50%) }
        .payWay>li:last-child>a>u{background:url("/templates/static/images/cz.png")no-repeat 0 -0.65rem;background-size:0.6rem 1.26rem;}
        .payFooter{margin-top:0.35rem;padding:0 0.3rem;}
        .payFooter>a{width:100%;padding:0.3rem 0; border-radius: 0.15rem;background:#d22f22;text-align: center;color:#fff;}
    </style>
</head>
<body>
    <div class="payHeader">
        当前积分：<span><!--{$b_coin}--></span>
    </div>
    <div class="paySec">
        <div class="secTop">
            <p>请选择积分充值数量:</p>
            <ul class="payList font0">
                <li class="money active">
                    <a href="javascript:void(0);">
                        <p>￥6</p>
                    </a>
                </li>
                <li class="money">
                    <a href="javascript:void(0);">
                        <p>￥15</p>
                    </a>
                </li>
                <li class="money">
                    <a href="javascript:void(0);">
                        <p>￥50</p>
                    </a>
                </li>
                <li class="money">
                    <a href="javascript:void(0);">
                        <p>￥200</p>
                    </a>
                </li>
                <li class="money">
                    <a href="javascript:void(0);">
                        <p>￥500</p>
                    </a>
                </li>
                <li>
                    <input type="number" placeholder="其他金额" onfocus="this.placeholder='少于1000'" onblur="this.placeholder='其他金额'" class="inputMoney" >
                </li>
            </ul>
            <p>获得 <span class="score">0</span> 积分，<span class="exp">0</span> 经验</p>
            <input type="hidden" value="6" id="chargeMoney">
        </div>
    </div>
    <div class="howPay">
        请选择支付方式
    </div>
    <ul class="payWay">
        <li>
            <a href="javascript:void(0);">
                微信支付
                <u></u>
                <label class="checkboxs">
                    <input type="checkbox"  name='paytype' checked value="wxpay">
                    <i></i>
                </label>
            </a>
        </li>
        <li>
            <a href="javascript:void(0);">
                支付宝支付
                <u></u>
                <label class="checkboxs">
                    <input type="checkbox" name='paytype' value="alipay">
                    <i></i>
                </label>
            </a>
        </li>
    </ul>
    <div class="payFooter">
        <a href="javascript:void(0);" id='payNow'>立即支付</a>
    </div>
</body>

    <script>
        $(function () {
            var $exp = $('.exp'),
                $score = $('.score'),
                $money = 0,
                $paytype = 'wxpay';

            $('.payWay>li').each(function () {
                var $this = $(this);
                $this.click(function () {
                    $('.payWay input').prop('checked',false);
                    $this.find('input').prop('checked',true);
                })
            })

            function count(num){
                if(num>=50 && num<200){
                    var score_num = num*100*1.05
                    var exp_num = num*10*1.05
                }else if(num>=200 && num<500){
                    var score_num = num*100*1.08
                    var exp_num = num*10*1.08
                }else if(num>=500){
                    var score_num = num*100*1.1
                    var exp_num = num*10*1.1
                }else{
                    var score_num = num*100
                    var exp_num = num*10
                }
                $score.html(parseInt(score_num));
                $exp.html(parseInt(exp_num));
            }

            $('.money').each(function () {
                var $this = $(this);
                $this.click(function () {
                    $this.addClass('active').siblings().removeClass('active');
                    $money = parseInt($this.find('a p').html().slice(1));
                    $('#chargeMoney').val($money);
                    count($money);
                })
            });
            $('.inputMoney').bind('input propertychange', function() {
                var $this = $(this),
                    $val = $this.val(),
                    $mon=0,$sco=0;
                $this.parent().siblings().removeClass('active');
                $this.parent().addClass('active');
                $val>=1000?$this.val(1000):$val;
                $money = $this.val();
                $('#chargeMoney').val($money);
                count($money);
            });

            $('#payNow').on('click',function(){
                doSubmit()
            })


            function doSubmit(){
                var pt = '<!--{$pt}-->';
                var paytype = $('.payWay input:checked').val();
                var chargeMoney = $('#chargeMoney').val();
                // 1 安卓跳转方法 | 2 ios 
                if(pt == 1){
                    android.doSubmit(paytype, charge_money);
                }else{           
                    window.location.href = '#{"do":"doSubmit","paytype":"'+paytype+'","chargeMoney":"'+chargeMoney+'"}';
                }    
            }
                      
        })
    </script>

</html>